<template>
  <div>
    <el-input style="width:200px" placeholder="请输入内容" v-model="query.queryInfo" :clearable="true" @clear="getUser">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUser"
            />
          </el-input>
    <el-button type="primary" @click="change" style="margin-left: 20px;">添加用户</el-button>
    <el-table
    :data="UserList"
    stripe
    style="width: 100%">
    <el-table-column type="index" label="id"></el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      >
    </el-table-column>
    <el-table-column
      prop="username"
      label="角色"
      >
      <template scope="scope">
        <el-button type="primary" size="mini" v-if="scope.row.username=='root'">超级管理员</el-button>
        <el-button type="danger" size="mini" v-else>普通管理</el-button>
      </template>
    </el-table-column>
      <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserByName(scope.row.username)"></el-button>
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.username)"></el-button>
              </template>
          </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[1,2,5,10]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
   <el-dialog
        title="添加用户"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed"
        >
        <!-- :rules="addFormRules" -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" >
    <el-form-item label="用户名" prop="username">
    <el-input v-model="addForm.username"></el-input>
    </el-form-item>
    <el-form-item label="第一次密码" prop="password">
    <el-input v-model="addForm.password" @blur="checkPass"></el-input>
    </el-form-item>
    <el-form-item label="第二次密码" prop="password2">
    <el-input v-model="addForm.password2" @blur="checkPass"></el-input>
    </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
        title="修改密码"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
        >
        <!-- :rules="addFormRules" -->
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px" >
    <el-form-item label="第一次密码" prop="password">
    <el-input v-model="editForm.password" @blur="checkPass2"></el-input>
    </el-form-item>
    <el-form-item label="第二次密码" prop="password2">
    <el-input v-model="editForm.password2" @blur="checkPass2"></el-input>
    </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      query: {
        queryInfo: '',
        pageSize: 5,
        pageNum: 1
      },
      total: 0,
      UserList: [],
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        username: '',
        password: '',
        password2: ''
      },
      editForm: {
        username: '',
        password: '',
        password2: ''
      },
      addFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '用户名在3到20之间',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 40,
            message: '用户名在6到40之间',
            trigger: 'blur'
          }
        ]
      },
      editFormRules: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 40,
            message: '用户名在6到40之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    async getUser () {
      const { data: res } = await this.$http.post('user/selectAllUserPage', this.query)
      if (res.data == null) {
        return this.$message.error(res.message)
      }
      this.total = res.data.total
      this.UserList = res.data.list
    },
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    change () {
      this.addDialogVisible = true
    },
    addUser () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return 0
        const { data: res } = await this.$http.post('user/addUser', this.addForm)
        if (res.data == null) {
          return this.$message.error(res.message)
        }
        this.$message.success('添加用户成功')
        this.addDialogVisible = false
        this.getUser()
      })
    },
    checkPass () {
      if (this.addForm.password2 !== '') {
        if (this.addForm.password !== this.addForm.password2) {
          return this.$message.error('两次密码不一致')
        }
      }
    },
    checkPass2 () {
      if (this.editForm.password2 !== '') {
        if (this.editForm.password !== this.editForm.password2) {
          return this.$message.error('两次密码不一致')
        }
      }
    },
    async removeUserByName (username) {
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      })
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.post('user/deleteUser', {
        username: username
      })
      if (res.data == null) {
        return this.$message.error(res.message)
      }
      this.$message.success('删除用户成功')
      this.getUser()
    },
    edit (username) {
      this.editForm.username = username
      this.editDialogVisible = true
    },
    editUser () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return 0
        const { data: res } = await this.$http.post('user/updatePassword', this.editForm)
        if (res.data == null) {
          return this.$message.error(res.message)
        }
        this.$message.success('修改密码成功')
        if (res.status === '401') {
          window.sessionStorage.clear()
          this.$router.push('/login')
          this.$message.error(res.message)
        }
        this.editDialogVisible = false
        this.getUser()
      })
    },
    handleSizeChange (newSize) {
      this.query.pageSize = newSize
      this.getUser()
    },
    handleCurrentChange (newPage) {
      this.query.pageNum = newPage
      this.getUser()
    }
  }
}
</script>
<style lang="less">

</style>
